<template>
    <ul :class="{'box_ul_ul':true,'smooth_1':smooth,'smooth_2':smooths}"  id="list">
        <li id="li_" @click="smooth_"
            :class="{'pull_down':true,'pull_down_r':pull_down_r,'selected':selected}">
            <img :src="title.img" alt="">{{title.names}}</li>
        <li v-for="(item,index) in list">
            <router-link
            :class="current===index?'current li_li':'li_li' "
            :to="item.url"
            @click="choose(index)">
            <img :src="item.img" alt="" @click="">{{item.names}}
            </router-link>
        </li>
    </ul>
</template>

<script>
export default {
    name: "DropDownBox",
    props:['listData','titleData','selected'],
    data(){
        return{
            ul_h:"",
            smooth:false,
            smooths:false,
            pull_down_r:false,
            title: {
                    names:"信息管理",
                    img:"../../../public/static/nav/kehu2C.png"},
            list:[{names:"",url:"",img:""}],
            current:"",
        }
    },
    mounted() {
            this.list = this.listData
            this.title = this.titleData
    },
    watch:{

        listData(newValue,oldValue){
            this.list = newValue;
        },
        titleData(newValue,oldValue){
            this.title = newValue;
        },
    },
    methods:{
        choose(index){
            this.current = index;
        },
        smooth_(){
            if( !this.smooth && !this.smooths){
                this.smooth = true;
                this.smooths = false;
            }else {
                this.smooth = !this.smooth;
                this.smooths = !this.smooths;
            }
            this.pull_down_r = !this.pull_down_r
        },
    }
}
</script>

<style scoped>
.selected{
    background:rgb(57, 198, 234)!important;
    color: white;
}
.current{
    color: rgb(255, 255, 255) !important;
    background: rgba(94, 94, 96, 0.38);
}
a{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #8f8c8c;
}
.box_{
    width: 100%;
}
.box_ .box_ul{
    width: 100%;
    list-style: none;
    padding: 10px 0;

}
.box_ .box_ul li{
    list-style: none;
    min-height: 45px;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding-left: 0 !important;
    color: white;
    transition: all .2s;
}
.box_ .box_ul li img{
    margin:0 5px 0 8px;
    width: 20px;
}
.box_ .box_ul li:hover{
    cursor: pointer;
    background: rgba(94, 94, 96, 0.38);
}
.box_ .box_ul li:first-child:hover{
    cursor: pointer;
    background: rgba(94, 94, 96, 0.38);
}

.box_ .box_ul li:last-child{
    margin-bottom: 0;
}
.box_ul_ul{
    width: 100%;
    list-style: none;
    margin: 0;
    padding-left: 0 !important;
    height: 45px;
    overflow: hidden;
}

.box_ul_ul li{
    position: relative;
    width: 100%;
    height: 45px;
    z-index: 9999;
    padding-left: 0 !important;
    margin-bottom: 5px !important;
}

.smooth_1{
    animation: smooth_1 .3s ease-in-out 0s 1 forwards ;
}
.smooth_2{
    animation: smooth_2 .3s ease-in-out 0s 1 forwards ;
}
@keyframes smooth_1 {
    0%{
        height: 45px;
    }
    100%{
        height: 145px;
    }
}
@keyframes smooth_2 {
    0%{
        height: 145px;
    }
    100%{
        height: 45px;
    }
}

.pull_down::after{
    position: absolute;
    right: 5%;
    top: 50%;
    content: "";
    display: inline-block;
    width: 12px;
    height:12px;
    border-left: 2px solid #fdf9f9;
    border-bottom: 2px solid #fcfafa;
    border-top: 0;
    border-right: 0;
    transform-origin: center;
    transform: rotate(-135deg) translateY(50%);
    transition: all 0.3s;
}

.pull_down li a{
    color: #8f8c8c !important;
}
.pull_down li a:hover{
    color: #1193e1 !important;
}

.pull_down_r:after{
    transform: rotate(-45deg);
    margin-top: -8px;
}
</style>